<template>
	<div>
		<!--查询参数-->
		<div class="section-panel">
			<div style="display: flex;">
				<div style="display: flex; ">
					<div style="width: 65px; line-height: 30px;">页面名称:</div>
					<div>
						<el-input placeholder="请输入分类名称" v-model="filterForm.title" clearable></el-input>
					</div>
				</div>
				<div style="margin-left: 10px;">
					<el-button icon="el-icon-search" type="primary">查询</el-button>
				</div>
			</div>
		</div>

		<!--查询结果-->
		<div class="section-panel mt5 p10">
			<div style="margin-bottom: 10px;">
				<el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加分类</el-button>
			</div>
			<el-table default-expand-all :data="menuList"  row-key="catid" :tree-props="{children:'children', hasChildren:'hasChildren'}" >
				<el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
				<el-table-column prop="title" label="分类名称"></el-table-column>
				<el-table-column prop="desc" label="分类简介"></el-table-column>
				<el-table-column prop="thumb" label="分类图片" align="center"></el-table-column>
				<el-table-column prop="status" label="状态">
					<template v-slot="scope">
						<el-switch active-value="1" :value="scope.row.status"></el-switch>
					</template>
				</el-table-column>
				<el-table-column  label="操作" align="center" width="200px">
					<template v-slot="scope">
						<el-button-group>
							<el-button icon="el-icon-edit-outline" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<CreateUI ref="createUI" v-if="createVisible" @complete="loadDataList()"></CreateUI>
		<EditUI ref="editUI" v-if="editVisible"  @update="handleEditCallback"></EditUI>
	</div>
</template>

<script>
	import CreateUI from './create.vue';
	import EditUI from './edit.vue';
	import http from '@/utils/http';
	
	export default {
		components:{
			CreateUI,
			EditUI
		},
		data() {
			return {
				createVisible:false,
				editVisible:false,
				filterForm: {
					title: ""
				},
				menuList: []
			}
		},
		mounted() {
			this.loadDataList();
		},
		methods:{
			handleAdd(){
				this.createVisible=true;
				this.$nextTick(()=>{
					this.$refs.createUI.dialogVisible=true;
					this.$refs.createUI.init();
				})
			},
			handleEdit(index,data){
				this.editVisible=true;
				this.$nextTick(()=>{
					this.$refs.editUI.dialogVisible=true;
					this.$refs.editUI.init(index,JSON.parse(JSON.stringify(data)));
				})
			},
			handleEditCallback(index,data){
				this.loadDataList();
				
			},
			loadDataList(){
				http.post("/api/admin/articlecategory/list_by_page").then(res => {
					if (res.status == 200 && res.data.code) {
						this.menuList=res.data.list;
						console.log(this.tableData);
					}
				}).catch(error => {})
			}
		}
	}
</script>

<style scoped>
	.el-table__header {
	  background-color: #f0f0f0;
	}
</style>